<template>
    <div v-loading="loading" class="add">
        <el-form v-if="!loading" ref="form" :model="form" label-width="80px">
            <el-form-item v-for="(item,index) in editField" :key="index" :label="item.name">
                <el-input v-if="item.fieldtype == 'input'" v-model="form[item.fieldname]"></el-input>
                <el-input
                    v-if="item.fieldtype == 'textarea'"
                    v-model="form[item.fieldname]"
                    :rows="2"
                    placeholder="请输入内容"
                    type="textarea">
                </el-input>
                <el-select v-if="item.fieldtype == 'select'" v-model="form[item.fieldname]" placeholder="请选择">
                    <el-option v-for="items in item.children" :key="items.id" :label="items.title"
                               :value="items.id">
                    </el-option>
                </el-select>
                <div v-if="item.fieldtype == 'radio'" class="radio">
                    <el-radio v-for="items in item.children" :key="items.value" v-model="form[item.fieldname]"
                              :label="items.value">{{ items.label }}
                    </el-radio>
                </div>
                <el-checkbox-group v-if="item.fieldtype == 'checkbox'" v-model="form[item.fieldname]"
                                   @change="handleCheckedCitiesChange">
                    <el-checkbox v-for="items in item.children" :key="items.value" :label="items.value">
                        {{ items.label }}
                    </el-checkbox>
                </el-checkbox-group>
                <div v-if="item.fieldtype == 'switch'" class="switch">
                    <el-switch
                        v-model="form[item.fieldname]"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                    </el-switch>
                </div>
                <div v-if="item.fieldtype == 'icon'" class="icon">
                    <el-tooltip effect="light" placement="top">
                        <div slot="content" class="content" style="">
                            <p v-for="items in item.children" :key="items.id"
                               :class="items.id == iconIndex ? 'iconActive' : '' "
                               @click="ChooseIcon(items)">
                                <span :class="items.icon" style="margin-right: 5px;"></span>
                                <i>{{ Icon(items.icon) }}</i>
                            </p>
                        </div>
                        <el-button><i :class="iconName"></i> {{ iconName }}</el-button>
                    </el-tooltip>
                </div>
                <div v-if="item.fieldtype == 'slider'" class="slider">
                    <el-slider v-model="form[item.fieldname]"></el-slider>
                </div>
                <div v-if="item.fieldtype == 'time'" class="datetime">
                    <el-date-picker
                        v-model="form[item.fieldname]"
                        placeholder="选择日期时间"
                        type="datetime">
                    </el-date-picker>
                </div>
                <div v-if="item.fieldtype == 'uploadfile'" class="uploadfile">
                    <el-upload
                        v-model="form[item.fieldname]"
                        :before-remove="beforeRemove"
                        :limit="1"
                        :on-exceed="handleExceed"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        class="upload-demo"
                        multiple
                    >
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </div>
                <div v-if="item.fieldtype == 'uploadimg'" class="uploadimg">
                    <el-upload
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        list-type="picture-card">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img :src="form[item.fieldname]" alt="" width="100%">
                    </el-dialog>
                </div>
                <div v-if="item.fieldtype == 'ueditor'" class="ueditor">
                    <vue-ueditor-wrap ref="editor" v-model="form[item.fieldname]" :config="config"
                                      @ready="ready"></vue-ueditor-wrap>
                </div>

            </el-form-item>
            <el-button type="primary" @click="GetSubmit()">提交</el-button>
        </el-form>
    </div>
</template>

<script>

import VueUeditorWrap from 'vue-ueditor-wrap'
import Msg from '@/utils/Message';
import http from "@/api/api";

export default {
    name: "edit",
    components: {
        VueUeditorWrap,
    },
    props: {
        editField: {
            type: Array
        },
        url: {
            type: String
        }
    },
    data() {
        return {

            iconName: "请选择",
            iconIndex: 0,
            form: {},
            dialogVisible: false,
            loading: true,
            msg: '',
            editor: {},
            config: {
                serverUrl: "",
                UEDITOR_HOME_URL: '/static/ueditor/',
                readonly: false,
                initialFrameHeight: 350,
                autoFloatEnabled: false,
                maximumWords: 5000,
                toolbars: [[
                    '|', 'undo', 'redo', '|',
                    'bold', 'italic', 'underline',
                    'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                    'paragraph', 'fontfamily', 'fontsize', '|',
                    'indent', '|', 'source',
                    'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                    'link', 'unlink', '|',
                ]]
            },

        }
    },
    created() {

    },
    mounted() {
        this.editField.forEach((item) => {

            this.form[item.fieldname] =  item.fielddata

        })
        setTimeout(() => {
            this.loading = false
        }, 200)

    },
    methods: {
        // 提交
        GetSubmit() {

            let editField = this.editField
            let form = this.form;

            for (var i = 0; i < editField.length; i++) {
                if (editField[i].isempty && form[editField[i].fieldname] == '') {
                    Msg.message(editField[i].name + '不能为空', 'error');
                    return;
                }
            }
            this.loading = true
            http.HttpPost(this.url, form).then((res) => {
                this.loading = false
                this.$parent.dialogVisibleAdd = false
                this.$router.go(0)
                if (res.code == 0) {
                    Msg.message(res.msg)
                } else {
                    Msg.message(res.msg, 'error')
                }
            })

        },

        // 选择图标
        ChooseIcon(item) {
            this.iconIndex = item.id
            this.iconName = item.icon

            let index = this.editField.findIndex(i => i.fieldtype == 'icon')

            this.form = {
                [this.editField[index].fieldname]: item.icon
            }


        },
        // 图标截取
        Icon(item) {
            return item.slice(3);
        },
        ready(instance) {
            this.editor = instance // 保存vue-ueditor-wrap实例
        },

        // insertParam(param) {
        //     this.editor.focus() // 获取光标位置
        //     this.editor.execCommand('inserthtml', "插入的文本") // 插入文本
        // },


        handleCheckedCitiesChange() {
            console.log(this.form)
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },

        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        }
    }

}
</script>

<style scoped>
.content {
    width: 600px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    height: 200px !important;
    overflow: scroll !important;

}

.content p {
    width: 50%;
    padding-left: 3%;
    height: 30px;
    cursor: pointer;
    width: 30%;
    border: 1px solid transparent;
    font-size: 14px;
    align-items: center;
    display: flex;
    justify-content: left;
    text-align: center

}

.iconActive {
    border: 1px solid #ccc !important;
}
</style>
